﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" id="workShopCode" name="workShopCode" value="" placeholder="请输入车间编码" class="layui-input" style="width: 300px;">
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <input type="text" id="workShopName" name="workShopName" placeholder="请输入车间名称" class="layui-input" style="width: 300px;">
        </div>
    </div>
    <div class="layui-col-md4 layui-col-xs12">
        <div class="layui-btn-container">
            <!-- 查询按钮 -->
            <button id="btnSearch" class="layui-btn layui-bg-blue" lay-submit lay-filter="demo-table-search">查询</button>
            <!-- 重置按钮 -->
            <button id="btnReset" type="button" class="layui-btn layui-btn-primary" onclick="location.reload()">重置</button>
            <!-- 新增按钮 -->
            <button id="btnAdd" type="button" class="layui-btn">新增</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="ID-table-demo-search" lay-filter="test"></table>
<!-- 操作列模板 -->
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-bg-orange layui-btn-sm layui-bg-radius" lay-event="edit">修改</button>
    <button class="layui-btn layui-bg-red layui-btn-sm layui-bg-radius" lay-event="del">删除</button>
</script>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

<script>
     layui.use(['table', 'form', 'layer'], function () {
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;

    // 初始化表格
      function intPersonInfo() {
        table.render({
            elem: '#ID-table-demo-search',
            url: '/WorkshopsSetups/ShowCar', // 后台接口URL
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: true, align: 'center' },
                 // @* 为车间编码添加超链接 *@
                { field: 'workShopCode', title: '车间编码', width: 200, align: 'center' ,templet : function (d)
                     {
                           return '<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" onclick="showDetails('+d.id+')">'+d.workShopCode+'</button>';
                      },
                },
                { field: 'workShopName', title: '车间名称', width: 200, align: 'center' },
                { field: 'area', title: '面积', align: 'center', width: 200 },
                { field: 'principal', title: '负责人', align: 'center', width: 200 },
                { field: 'isTrue', title: '是否启用', width: 200, sort: true, align: 'center',templet : function (d)
                      {
                          return d.isTrue == true? "是" : "否";
                       }
                },
                { field: 'remark', title: '备注', align: 'center', width: 200 },
                { fixed: 'right', title: '操作', width: 200, minWidth: 125, toolbar: '#barDemo', align: 'center' }
            ]],
            page: true, // 开启分页
            height: 550,
             
        });
    }
  
       intPersonInfo();

    // 监听搜索表单提交
    form.on('submit(demo-table-search)', function (data) {
        var field = data.field; // 获取表单数据
        // 发送 AJAX 请求到后台接口
        $.ajax({
            url: '/WorkshopsSetups/ShowCar', // 后台接口URL
            type: 'get',
            data: {
                page: 1, // 默认请求第一页
                limit: 10, // 每页显示条数，可以根据实际需求设置
                workShopCode: $("#workShopCode").val(),
                workShopName: $("#workShopName").val(),
            },
            success: function (result) {
                console.log(1,result);
                // 重新加载表格数据
                table.reload('ID-table-demo-search', {
                    where: {
                        page: 1, // 默认请求第一页
                        limit: 10, // 每页显示条数，可以根据实际需求设置
                        workShopCode: $("#workShopCode").val(),
                        workShopName: $("#workShopName").val()
                    },
                    data: result.data,
                    page: { curr: 1}, // 重新从第 1 页开始
                    done: function (res, curr, count) {
                        // 重新渲染表格
                        console.log('表格重新加载完成');
                    }
                 });
                layer.msg('搜索成功');
            },
            error: function (xhr, status, error) {
                console.error('发生错误: ', error);
                layer.msg('搜索失败，请稍后重试');
            }
        });
        return false; // 阻止默认 form 跳转
    });

         // 监听事件删除
         table.on('tool(test)', function (obj) {
             layEvent = obj.event;
             var data = obj.data;
             console.log(2,data)
             if (layEvent === 'del') {
                 layer.confirm('确定删除吗？', function (index) {
                     $.ajax({
                         url: "/WorkshopsSetups/DeleteWorkshopSetup",
                         data: {
                             id: data.id,
                         },
                         type: "post",
                         datatype: "json",
                         success: function (res) {
                             if (res == 1) {
                                 layer.msg('删除成功');
                                 intPersonInfo();
                             } else {
                                 layer.msg('删除失败');
                             }
                         }
                     })
                     layer.close(index); //关闭弹框
                 })
             }
             // 修改
             else if (obj.event === 'edit') {
               var data = obj.data;
               console.log(3,data)
               if (obj.event === 'edit') {
                   layer.open({
                       type: 2, // page 层类型
                       area: ['800px', '600px'],
                       title: '修改车间',
                       shade: 0.6, // 遮罩透明度
                       shadeClose: true, // 点击遮罩区域，关闭弹层
                       maxmin: true, // 允许全屏最小化
                       anim: 0, // 0-6 的动画形式，-1 不开启
                         content: '/WorkshopsSetups/EditWorkshopSetup?id=' + data.id,
                       end: function () {
                           intPersonInfo(); // 刷新表格数据
                       }
                   });
               }
             }
         })

         // 添加
         document.getElementById('btnAdd').addEventListener('click', function () {
                 layer.open({
                   type: 2, // page 层类型
                   area: ['800px', '600px'],
                   title: '添加车间',
                   shade: 0.6, // 遮罩透明度
                   shadeClose: true, // 点击遮罩区域，关闭弹层
                   maxmin: true, // 允许全屏最小化
                   anim: 0, // 0-6 的动画形式，-1 不开启
                   // content: '<iframe src="/WorkshopsSetups/AddWorkshopsSetups" style="width:100%;height:100%;" ></iframe>'
                    content: '/WorkshopsSetups/AddWorkshopsSetups',
                    end: function () {
                        intPersonInfo(); // 刷新表格数据
                    }
                 });

         });

     });

          //超链接 方式 跳转到编辑页面
              function showDetails(id) {
                  console.log(id)
                  layer.open({
                      type: 2, // page 层类型
                      area: ['800px', '600px'],
                      title: '车间详情',
                      shade: 0.6, // 遮罩透明度
                      shadeClose: true, // 点击遮罩区域，关闭弹层
                      maxmin: true, // 允许全屏最小化
                      anim: 0, // 0-6 的动画形式，-1 不开启
                        content: '/WorkshopsSetups/DetailWorkshop?id=' + id,
                       end: function () {
                          intPersonInfo(); // 刷新表格数据
                      }
                  });
              }
</script>

